@import '@material/switch/functions.import';
@import '@material/switch/mixins.import';
@import '@material/switch/variables.import';
@import '@material/form-field/mixins.import';
@import '@material/ripple/variables.import';
@import '../mdc-helpers/mdc-helpers';
@import '../../material/core/style/layout-common';
@import '../../cdk/a11y/a11y';

@include mdc-switch-without-ripple($query: $mat-base-styles-query);
@include mdc-form-field-core-styles($query: $mat-base-styles-query);

.mat-mdc-slide-toggle {
  display: inline-block;

  // The ripple needs extra specificity so the base ripple styling doesn't override its `position`.
  .mat-mdc-slide-toggle-ripple, .mdc-switch__thumb-underlay::after {
    @include mat-fill;
    border-radius: 50%;
    // Disable pointer events for the ripple container so that it doesn't eat the mouse events meant
    // for the input. Pointer events can be safely disabled because the ripple trigger element is
    // the host element.
    pointer-events: none;
    // Fixes the ripples not clipping to the border radius on Safari. Uses `:not(:empty)`
    // in order to avoid creating extra layers when there aren't any ripples.
    &:not(:empty) {
      transform: translateZ(0);
    }
  }

  // The thumb-underlay element has `mat-mdc-focus-indicator` which sets
  // a relative position. This element must have absolute positioning. This
  // has increased specificity than the style set in MDC to guarantee that
  // it will be absolutely positioned.
  .mdc-switch__thumb-underlay {
    position: absolute;
  }

  // The MDC switch styles related to the hover state are intertwined with the MDC ripple styles.
  // We currently don't use the MDC ripple due to size concerns, therefore we need to add some
  // additional styles to restore the hover state.
  // We use `::after`, rather than `::before`, because `::before` is used by the
  // generic strong focus indication styles.
  .mdc-switch__thumb-underlay::after {
    border-radius: 50%;
    content: '';
    opacity: 0;
  }

  .mdc-switch:hover .mdc-switch__thumb-underlay::after {
    opacity: map-get($mdc-ripple-dark-ink-opacities, hover);
    transition: mdc-switch-transition-enter(opacity, 0, 75ms);
  }

  // Needs a little more specificity so the :hover styles don't override it.
  &.mat-mdc-slide-toggle-focused .mdc-switch .mdc-switch__thumb-underlay::after {
    opacity: map-get($mdc-ripple-dark-ink-opacities, focus);
  }

  // We use an Angular Material ripple rather than an MDC ripple due to size concerns, so we need to
  // style it appropriately.
  .mat-ripple-element {
    opacity: map-get($mdc-ripple-dark-ink-opacities, press);
  }

  .mat-ripple {
    border-radius: 50%;
  }

  // Angular Material supports disabling all animations when NoopAnimationsModule is imported.
  // TODO(mmalerba): Look into using MDC's Sass queries to separate the animation styles and
  //  conditionally add them. Consider the size cost when deciding whether to switch.
  &._mat-animation-noopable {
    .mdc-switch__thumb-underlay,
    .mdc-switch__thumb-underlay::after {
      transition: none;
    }
  }
}


@include cdk-high-contrast(active, off) {
  .mat-mdc-slide-toggle-focused {
    .mdc-switch__track {
      // Usually 1px would be enough, but MDC reduces the opacity on the
      // element so we need to make this a bit more prominent.
      outline: solid 2px;
      outline-offset: $mdc-switch-track-height / 2;
    }
  }
}
